@model Component1.Pages.Components.Message

<div>
    <h1>Text Property: @Model.Text</h1>
    <h2>Text2 Property: @Model.Text2</h2>

    <button on:click="@(() => Model.TriggerRender())" class="btn btn-primary">Trigger Text2</button>


    <br/>
    <div class="row mt-3">
        <div class="col-md-6">
            <h3>Inner Message Component @@Model.Text</h3>
            <p>In this case we do not need at use key property for inner-message component because the parent <b>message</b> component gets refreshed by <b>container</b>.</p>
            <div style="background-color:yellow;padding:5px;">
                <inner-message text="@Model.Text"></inner-message>
            </div>
        </div>
        <div class="col-md-6">
            <h3>Inner Message Component @@Model.Text2</h3>
            <p>In this case we need to use key property because @@Model.Text2 is changed by parent <b>message</b> component.</p>
            <inner-message text="@Model.Text2" key="@Model.Text2"></inner-message>
        </div>
    </div>
</div>